<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="utf-8">
    <title>HakuNeko</title>
    <link rel="icon" href="./img/logo.png">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
    <script src="./js/protobufjs.min.js"></script>
    <script src="./js/crypto-js.min.js"></script>
    <script src="./js/oauth-1.0a.min.js"></script>
    <script src="./js/jszip.min.js" defer></script>
    <script src="./js/pdfkit.standalone.js" defer></script>
    <script src="./js/hls.light.min.js" defer></script>
    <script src="./js/ass.min.js" defer></script>
    <script src="./js/sql.min.js" defer></script>
    <script src="./js/exif-js.min.js" defer></script>
    <script type="module">
        const electronDialog = require('electron').remote.dialog
        import HakuNeko from './mjs/HakuNeko.mjs'

        // https://github.com/electron/electron/blob/master/docs/api/dialog.md#dialogshowmessageboxbrowserwindow-options
        function replaceDialogs() {
            alert = async (message, title, type) => {
                let options = {
                    type: type || 'info',
                    title: title || 'HakuNeko',
                    message: message,
                    buttons: [ 'OK' ]
                };
                let response = await electronDialog.showMessageBox(options);
                return response === options.buttons.indexOf('OK');
            };
            confirm = async (message, title, type, buttons) => {
                let options = {
                    type: type || 'question',
                    title: title || 'HakuNeko',
                    message: message,
                    buttons: buttons || [ 'Yes', 'No' ]
                };
                let response = await electronDialog.showMessageBox(options);
                return response.response === 0;
            };
        }

        async function loadEngine() {
            console.log('Loading Engine:', 'HakuNeko');
            window.HakuNeko = new HakuNeko(window);
            // TODO: remove backward compatibility alias 'Engine' when all references are set to HakuNeko engine
            window.Engine = window.HakuNeko;
            
            await Engine.initialize();
            // TODO: remove stuff that requires various globals, incl. global HakuNeko engine
            //new HistoryWorker();
            await Engine.Settings.load();
            Engine.BookmarkManager.loadProfile( 'default', undefined );
            Engine.ChaptermarkManager.loadChaptermarks( undefined );
        }

        function loadFrontend() {
            let identifier = Engine.Settings.frontend.value;
            console.log('Loading Frontend:', identifier);
            loadClassicPolymer(identifier);
        }

        function loadClassicPolymer(identifier) {
            // the entry tag for the web application
            let element = document.createElement('hakuneko-app');
            document.body.appendChild(element);
            // the required webcomponents for polymer
            let webcomponents = document.createElement('script');
            webcomponents.src = './lib/webcomponentsjs/webcomponents-loader.js';
            document.head.appendChild(webcomponents);
            // the hakuneko application polymer element
            let frontend = document.createElement('link');
            frontend.href = `./lib/hakuneko/${identifier}/app.html`;
            frontend.rel = 'import';
            document.head.appendChild(frontend);
        }

        function closeNotification() {
            let notification = document.querySelector('#notification');
            notification.parentNode.removeChild(notification);
        }

        async function main() {
            replaceDialogs();
            await loadEngine();
            loadFrontend();
        }

        main();
    </script>
    <script>
        this.win=require('electron').remote.getCurrentWindow();

        function minimizeWindow(){
            this.win.minimize();
        }

        function maximizeWindow(){
            if (! this.win.isMaximized()) {
                this.win.maximize();
            } else {
                this.win.unmaximize();
            }
        }

        function closeWindow(){
            this.win.close();
        }
    </script>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow-y: hidden;
        }

        #notification {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: 0.5em;
            padding: 0.5em;
            box-shadow: 0px 2px 4px 2px #808080;
            background-color: #fff8f0;
            border: 1px solid #ffc0c0;
            border-radius: 0.25em;
            font-family: sans-serif;
            text-align: center;
            z-index: 2;
        }

        #notification a {
            text-decoration: none;
            cursor: pointer;
        }

        #notification > #close {
            position: absolute;
            margin-top: -2px;
            right: 1em;
            cursor: pointer;
        }

        #default_menubar {
            text-align : right;
            -webkit-app-region: drag;
        }

        #default_menubar > span {
            -webkit-app-region: no-drag;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="default_menubar">
        <!-- Using UTF8 as base64 PNG 🗕🗖🗙 because of MacOS -->
        <span id="win_minimize" onclick="minimizeWindow()" title="Minimize Window"><img alt="minimize" src="" /></span>
        <span id="win_maximize" onclick="maximizeWindow()" title="Maximize Window"><img alt="maximize" src="" /></span>
        <span id="win_close" onclick="closeWindow()" title="Close Window"><img alt="close" src="" /></span>
    </div>
    <div id="notification">
        A new <strong>HakuNeko Desktop Client</strong> is available for download on
        <a href="https://github.com/manga-download/hakuneko/releases" target="_blank">GitHub</a>
        <span id="close" onclick="closeNotification()" title="Hide notification">✖</span><!-- ❌&times; -->
    </div>
</body>
</html>